<template>
  <div>
    <!-- router-view标签代表这块区域将用来显示路由配置里的组件,具体显示哪个根据url地址决定, 其实有点像vue基础部分的slot插槽 -->
    <router-view></router-view>
    <TabBar v-show="isShowTabbar"></TabBar>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from "vue";
import TabBar from "./components/TabBar.vue";
import { mapMutations, mapState, useStore } from "vuex";

// 和router类似，如果你使用的是VOA形式的vue，那就是 this.$store，不用像这里一样引入再调用
const store = useStore();

// 最好搞个computed属性来读取state中的数据，一来当state中的数据变化时能及时响应到触发页面更新，二来能够自己定义个变量名，不用在模板中写一长串store.state.xxx，不美观也不优雅
const isShowTabbar = computed(() => {
  return store.state.isShowTabbar;
});

// 相信如果你有vue2的基础的话，你一定知道vue2提供了mapState和mapGetters以及mapMutations这些api，但是很遗憾，这些只适用于VOA了，尤雨溪，没有提供VCA状态下的map，原因很简单，vue3VCA已经更推荐使用pinia作为状态管理工具了。
</script>


<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  padding: 25vw 0;
}

h4 {
  font-size: 4vw;
  padding-top: 12vw;
}
</style>
